<template>
  <div class="boss-report-container">
    <div class="filter-bar">
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="handleDateChange"
      ></el-date-picker>
      <el-button type="primary" @click="fetchReportData" style="margin-left: 10px">
        查询
      </el-button>
      <el-button @click="resetFilters" style="margin-left: 10px">
        重置
      </el-button>
    </div>

    <el-table
      :data="tableData"
      border
      v-loading="loading"
      style="width: 100%; margin-top: 20px"
      empty-text="暂无数据"
    >
      <el-table-column
        prop="bossId"
        label="老板ID"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="bossNickname"
        label="老板昵称"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="totalSpent"
        label="消费总额"
        width="140"
      >
        <template slot-scope="scope">
          {{ formatCurrency(scope.row.totalSpent) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="orderCount"
        label="订单数量"
        width="120"
      >
        <template slot-scope="scope">
          {{ scope.row.orderCount ?? 0 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="lastSpentTime"
        label="最后消费时间"
        width="180"
      >
        <template slot-scope="scope">
          {{ formatDate(scope.row.lastSpentTime) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="registerTime"
        label="注册时间"
        width="180"
      >
        <template slot-scope="scope">
          {{ formatDate(scope.row.registerTime) }}
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.currentPage"
      :page-sizes="[10, 20, 50]"
      :page-size="pagination.pageSize"
      :total="pagination.total"
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top: 20px; text-align: right"
    ></el-pagination>
  </div>
</template>

<script>
import adminApi from '@/http/adminApi.js';

export default {
  name: "BossReport",
  data() {
    return {
      dateRange: [],
      tableData: [],
      loading: false,
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    };
  },
  mounted() {
    this.fetchReportData();
  },
  methods: {
    async fetchReportData() {
      this.loading = true;
      try {
        const params = {
          page: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
          startTime: this.dateRange?.[0] ? this.formatDateTime(this.dateRange[0]) : null,
          endTime: this.dateRange?.[1] ? this.formatDateTime(this.dateRange[1]) : null,
          tenantId: 1
        };

        const response = await adminApi.getBossReportData(params);
        if (response && response.code === 200) {
          this.tableData = response.data?.list || [];
          this.pagination.total = response.data?.total || 0;
        } else {
          this.$message.error(response?.message || "获取报表数据失败");
          this.tableData = [];
          this.pagination.total = 0;
        }
      } catch (error) {
        console.error("获取老板报表数据异常:", error);
        this.$message.error("获取数据失败，请重试");
        this.tableData = [];
        this.pagination.total = 0;
      } finally {
        this.loading = false;
      }
    },
    handleSizeChange(pageSize) {
      this.pagination.pageSize = pageSize;
      this.fetchReportData();
    },
    handleCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage;
      this.fetchReportData();
    },
    handleDateChange() {
      this.pagination.currentPage = 1;
      this.fetchReportData();
    },
    resetFilters() {
      // 重置筛选条件
      this.dateRange = [];
      this.pagination.currentPage = 1;
      this.fetchReportData();
    },
    formatDate(dateStr) {
      if (!dateStr) return '-';
      
      const date = new Date(dateStr);
      if (isNaN(date.getTime())) return '-';
      
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    formatDateTime(date) {
      if (!date) return null;
      
      const d = new Date(date);
      if (isNaN(d.getTime())) return null;
      
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, '0');
      const day = String(d.getDate()).padStart(2, '0');
      const hours = String(d.getHours()).padStart(2, '0');
      const minutes = String(d.getMinutes()).padStart(2, '0');
      const seconds = String(d.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    formatCurrency(value) {
      if (value === null || value === undefined) {
        return '-';
      }
      const num = typeof value === 'string' ? parseFloat(value) : value;
      return `¥ ${num.toFixed(2)}`;
    }
  }
};
</script>

<style scoped>
.boss-report-container {
  padding: 20px;
  background-color: #fff;
  min-height: 600px;
}

.filter-bar {
  display: flex;
  align-items: center;
}
</style>